<route lang="json">
{
  "meta": {
    "title": "why it matters"
  }
}
</route>
<script setup lang="ts">
import { _require } from "@@/utils/tools/index";
import { useInView } from "@@/hooks/toolsHooks";
import { inTopGroup } from "@@/common/js/animation";

const { vInView } = useInView();
const title = import.meta.env.VITE_GLOB_APP_TITLE;

const part2 = computed(() => [
  {
    title: "Interoperability",
    content: `We believe the future of finance will be built on interconnected
              networks with value – in the form of smart money, tokenised
              assets, and information – flowing freely between them.`,
  },
  {
    title: "Ease of use",
    content: `We offer our customers an industry-leading and innovative trading
              platform, ensuring a profitable trading experience in an
              exceptional environment.`,
  },
  {
    title: "Adaptability",
    content: `Our technology makes it easy to deploy new tokens, to move them
              from chain to chain, to adapt smart contracts to new use cases.
              Because your choices today shouldn’t hold you back tomorrow.`,
  },
  {
    title: "Security",
    content: `Our regulators ensure that it complies with the regulations and
              standards of the financial industry Customers can trust and rely
              on their services. Whether in Canada or Australia, we are
              professional and transparent To conduct business in order to
              provide a safe and reliable trading environment.`,
  },
  {
    title: "Programmability",
    content: `One of the most powerful aspects of tokenised money is the ability
              to embed gradual control of its behaviour. The money of the future
              will be smarter, more useful, more purposeful.`,
  },
  {
    title: "Resilience",
    content: `We engineer resilience into our technology because we believe it
              is as much about enabling upside as it is protecting against risk.
              Resilience has its own value, providing opportunity in a volatile
              world.`,
  },
]);

const part3 = computed(() => [
  {
    title: "Innovation",
    content: `We love a challenge and have little respect for the status quo. Experience has taught us that problems are a matter of perspective and that, with new ideas and a fresh way of looking at things, solutions – more often than not – present themselves.`,
  },
  {
    title: "Ambition",
    content: `The scale of a task won’t deter us when we believe it will take us closer to our vision. Every problem is an opportunity. Every obstacle, the chance to take a calculated risk and question assumptions. In short, we’re not afraid to think big.`,
  },
  {
    title: "Trust",
    content: `Fundamental to a prosperous economy, trust also lies at the heart of our company. Indeed, we believe it is the bedrock of a healthy society committed to equality and fairness. We trust each other, we engineer trust into our solutions, and we work hard every day to earn the trust of our clients and partners.`,
  },
  {
    title: "Adaptability",
    content: `We remain open-minded, objective and flexible at all times. When the facts change, so does our approach. We embrace that agility and encourage all those we work with to do the same.`,
  },
  {
    title: "Respect",
    content: `We’re respectful of the ideas and perspectives of others, we celebrate peoples’ difference and recognise the achievements of others. We hold the needs and health of our environment dear. And we have no tolerance for bullying, harassment or discrimination of any kind.`,
  },
]);
</script>

<template>
  <CpageView class="auto-MT-lg Mcol-lg">
    <!-- 一栏 -->
    <ElRow class="ML-xxl" :justify="'space-between'" :align="'middle'">
      <ElCol :xs="24" :span="10">
        <div v-in-view:once="(e) => inTopGroup(e.target)" class="MR-lg">
          <h1>
            <span in-top>Why<span>&nbsp;</span></span>
            <span in-top>it<span>&nbsp;</span></span>
            <span in-top>matters<span>&nbsp;</span></span>
            <span in-top>?<span>&nbsp;</span></span>
          </h1>
        </div>
      </ElCol>
      <ElCol :xs="24" :span="14">
        <ElImage
          class="part-1_image"
          :src="_require('src/assets/images/desplay/8.jpg')"
          :fit="'cover'"
        />
      </ElCol>
    </ElRow>
    <!-- 二栏 -->
    <div class="MT-xxl Prow-xxl">
      <div v-in-view:once="(e) => inTopGroup(e.target)">
        <h2 class="T-A-C">
          <span in-top>Why<span>&nbsp;</span></span>
          <span class="T-M1" in-top>{{ title }}</span>
          <span class="T-M1" in-top>?</span>
        </h2>
        <p in-top class="MT-md T-A-C T-weak">
          We make blockchain simple, trusted, and future-proof.
        </p>
      </div>
      <ElRow v-in-view:once="(e) => inTopGroup(e.target)" class="MT-lg">
        <ElCol v-for="item in part2" in-top :span="8" :xs="12">
          <div class="hover-line-L MG-md">
            <h3>{{ item.title }}</h3>
            <p class="MT-md T-weak">
              {{ item.content }}
            </p>
          </div>
        </ElCol>
      </ElRow>
    </div>

    <!-- 五栏 -->
    <div class="MT-xxl Prow-xl">
      <div v-in-view:once="(e) => inTopGroup(e.target)">
        <h2 class="T-A-C">
          <span in-top>Our<span>&nbsp;</span></span>
          <span class="T-M1" in-top>values</span>
        </h2>
        <p in-top class="MT-md T-A-C T-weak">
          Our team shares deep expertise in finance and technology but what
          unites us is our beliefs.
        </p>
      </div>
      <ElRow v-in-view:once="(e) => inTopGroup(e.target)" class="MT-lg">
        <ElCol v-for="item in part3" in-top :span="8" :xs="12">
          <div class="hover-line-L MG-md">
            <h3>{{ item.title }}</h3>
            <p class="MT-md T-weak">
              {{ item.content }}
            </p>
          </div>
        </ElCol>
      </ElRow>
    </div>
  </CpageView>
</template>

<style lang="scss" scoped></style>
